<template>
  <div class="chat-main">
    <div class="chat-msglst">
      <ele-empty v-if="listCount==0" text="暂无消息"></ele-empty>
      <div :class="(chatTo && chatTo['id']==item['history'][0]['id'])?'active':''" @click="toChat(item['history'][0]['type'],item['history'][0]['id'],item['history'][0]['name'],item['history'][0]['realname'],item['history'][0]['avatar'],item['unread'])" class="chat-msglst-item" v-for="(item,k) in msgHistory">
        <div class="avatar">
          <el-avatar :size="40" :src="item['history'][0]['avatar']"/>
        </div>
        <div class="content">
          <div class="name-row">
            <div class="name">{{item['history'][0]['realname'] || item['history'][0]['name']}}</div>
            <div class="time">{{item['history'][0]['timestamp']}}</div>
          </div>
          <div class="msg-row">
            <div class="msg" v-html="item['history'][0]['content']"></div>
            <div v-if="item['unread']>0" class="badge">{{item['unread']}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="chat-dialogue">
      <template v-if="friendId">
        <div class="head"></div>
        <el-scrollbar ref="msgScrollBar" wrapStyle="overflow-x: hidden;" class="msg-lst">
          <template v-for="(item,index) in myMsgList">
            <div class="msg-date">{{item.timestampStr}}</div>
            <div v-if="item.id==userInfo.user_id" class="msg-item self">
              <el-button v-if="item.send==1 && reSendStatus!=index && item.msgType!='img'" :data-key="index" @click="reSend" slot="reference" type="text" class="ele-text-danger" icon="my-icon my-icon-roundclosefill"/>
              <div v-if="item.send==1 && item.msgType=='img'" style="display:flex;align-items:center;font-size:12px;padding-right:5px;" class="ele-text-danger">发送失败</div>
              <div v-if="reSendStatus==index" style="display:flex;align-items:center;">
                <i class="el-icon-loading" style="align-items: center"></i >
              </div>

              <div class="msg-container">

                <div v-if="item.msgType=='img'" class="msg-con msg-image">
                  <el-image @load="scrollDown()" :preview-src-list="[item.content]" :data-src="item.content" :src="item.content+''" class="radius" fit="cover" style="background:#fff;">
                    <div slot="error" style="line-height:22px;color:#606266;padding:10px;">
                      图片加载失败
                    </div>
                    <div slot="placeholder" style="line-height:22px;color:#606266;padding:10px;">
                      图片加载中……
                    </div>
                  </el-image>
                </div>
                <div v-if="item.msgType=='text'" class="msg-con msg-text" v-html="item.content"></div>
                <div v-if="item.msgType=='json'" class="msg-con msg-json">
                  <div class="msg-json-title">{{item.content.title}}</div>
                  <div class="msg-json-content" v-html="item.content.content"></div>
                  <div class="msg-json-a" v-if="item.content.webUrl" @click="toDetail((item.content.dialogTitle || item.content.title),item.content.webUrl,item.content.actionType,item.content.target)">{{item.content.actionTip || '查看详情'}}</div>
                </div>
              </div>
              <div class="avatar">
                <el-avatar v-if="item.type=='friend'" :size="40" :src="item['avatar']"/>
                <el-avatar v-else :size="40" :src="item['from_avatar']"/>
              </div>
            </div>
            <div v-else class="msg-item">
              <div class="avatar">
                <el-avatar v-if="item.type=='friend'" :size="40" :src="item['avatar']"/>
                <el-avatar v-else :size="40" :src="item['from_avatar']"/>
              </div>
              <div class="msg-container">
                <div class="nickname" v-if="item.type=='group'">{{item.from_name}}</div>
                <div v-if="item.msgType=='img'" class="msg-con msg-image">
                  <el-image @load="scrollDown()" :preview-src-list="[item.content]" :data-src="item.content" :src="item.content+'_300'" class="radius" fit="cover" style="background:#fff;">
                    <div slot="error" style="line-height:22px;color:#606266;padding:10px;">
                      图片加载失败
                    </div>
                    <div slot="placeholder" style="line-height:22px;color:#606266;padding:10px;">
                      图片加载中……
                    </div>
                  </el-image>
                </div>
                <div v-if="item.msgType=='text'" class="msg-con msg-text" v-html="item.content"></div>
                <div v-if="item.msgType=='json'" class="msg-con msg-json">
                  <div class="msg-json-title">{{item.content.title}}</div>
                  <div class="msg-json-content" v-html="item.content.content"></div>
                  <div class="msg-json-a" v-if="item.content.webUrl" @click="toDetail((item.content.dialogTitle || item.content.title),item.content.webUrl,item.content.actionType,item.content.target)">{{item.content.actionTip || '查看详情'}}</div>
                </div>
              </div>
            </div>

          </template>
        </el-scrollbar>
        <div class="foot">
          <div class="tool-bar">
            <el-popover
              placement="top-start"
              width="350"
              v-model="faceDialogVisible">
              <div class="face-lst">
                <el-button class="btn" @click="faceAddToMessage(item.char)" style="font-size:19px;" type="text" v-for="item in faceLst" :key="item.name">{{item.char}}</el-button>
              </div>
              <el-button slot="reference" type="text" class="btn" icon="my-icon my-icon-emojilight"/>
            </el-popover>
            <el-upload
              class=""
              action=""
              accept=".png,.jpeg,.jpg,.gif"
              :show-file-list="false"
              :http-request="sendPic"
              :before-upload="beforeUpload">
              <el-button type="text" class="btn" icon="my-icon my-icon-piclight"/>
            </el-upload>
          </div>
          <div class="input-area">
            <el-input v-model="msgContent" placeholder="请输入消息" resize="none" type="textarea"></el-input>
          </div>
          <div class="btn-bar">
            <el-button type="primary" size="mini" @click="sendMsg" :disabled="sendBtnVisible">发送</el-button>
          </div>
        </div>
      </template>
      <template v-else></template>
    </div>
    <el-dialog
      :title="dialogTitle"
      :fullscreen="true"
      custom-class="my-dialog"
      width="100%"
      center
      :visible.sync="dialogVisible">
      <iframe :src="iframeUrl" frameborder="0" width="100%" height="100%"></iframe>
    </el-dialog>
  </div>
</template>

<script>
import { mapState,mapMutations } from 'vuex';
import chat from '@/model/chatModel.js';
import util from '@/utils/util';
import util2 from '@/utils/util2';
import OSS from 'ali-oss';
import setting from '@/config/setting';
let me = null;
export default {
  name: 'chat',
  components: {},
  computed: {
    ...mapState({
      mainTab: ({baseModule}) => baseModule.mainTab,
      historyMsgList: ({chatModule}) => chatModule.historyMsgList,
      unreadMsgCount: ({chatModule}) => chatModule.unreadMsgCount,
      chatWindowsId: ({chatModule}) => chatModule.chatWindowsId,
      winFocus: ({chatModule}) => chatModule.winFocus,
      chatTo: ({chatModule}) => chatModule.chatTo,
      userInfo: ({user}) => user.user,
    })
  },
  data() {
    return {
      ossClient:null,
      reSendStatus:-1,
      sendBtnVisible:true,
      faceLst:[],
      faceDialogVisible:false,
      msgContent:'',
      msgHistory: [],
      myMsgList:[],
      listCount: 0,
      msgCount: 0,
      friendId: 0,
      msgType: 'friend',
      dialogVisible: false,
      iframeUrl:'',
      dialogTitle:'',
      ipcRenderer:null
    };
  },
  created(){
    console.log("chat created");
    me = this;
    if (this.isElectron){
      this.ipcRenderer = require('electron').ipcRenderer;
    }
    this.faceLst = util2.faceLst;
    this.ossClient = new OSS(setting.oss);
  },
  mounted() {
    console.log("chat mounted");
    this.msgHistory = this.transferData(this.historyMsgList);
  },
  watch:{
    historyMsgList(val){
      me.msgHistory = me.transferData(val);
      if(me.friendId>0){
        me.myMsgList = me.transferMyData(val);
        this.$nextTick(function() {
          // me.setRead();
          me.scrollDown();
        });
      }
    },
    winFocus(val){
      if(val && this.mainTab=='chat'){
        this.setRead();
      }
    },
    mainTab(val){
      if(val=='chat'){
        this.$nextTick(function() {
          me.scrollDown();
          me.setRead();
        });
      }
    },
    msgContent(val){
      if(val){
        this.sendBtnVisible=false;
      }
      else{
        this.sendBtnVisible=true;
      }
    },
    chatTo(val){
      me.friendId = val.id;
      me.msgType = val.type;
      me.setRead();
      me.myMsgList = this.transferMyData(this.historyMsgList);
      this.$nextTick(function() {
        me.scrollDown();
      });
    }
  },
  methods: {
    ...mapMutations(['chatModule/setChatWindowsId', 'chatModule/setHistoryMsgList', 'chatModule/setUnreadMsgCount', 'chatModule/setChatTo', 'baseModule/setMainTab', 'baseModule/setElectronWinIsMax']),
    transferData(msgList){
      var ms = {};
      if(msgList){
        var getUnReadCount=function(chatlog){
          var i = 0;
          for(var n=0;n<chatlog.length;n++){
            if(chatlog[n].read==0){
              i++;
            }
          }
          return i;
        };
        ms = util.deepCopy(msgList[me.userInfo.user_id]||{});
        ms = util.objSort(ms,'timestamp','desc');
        for(var key in ms){
          me.listCount++;
          ms[key]['history'][0]['timestamp'] = util.transferDate(ms[key]['history'][0]['timestamp']);
          if(ms[key]['history'][0]['type']=='group'){
            ms[key]['history'][0]['content'] = ms[key]['history'][0]['from_name']+ ":" + util.transferContent(ms[key]['history'][0]['content']);
          }
          else{
            ms[key]['history'][0]['content'] = util.transferContent(ms[key]['history'][0]['content']);
          }
          ms[key]['unread'] = getUnReadCount(ms[key]['chatlog']);
          if(ms[key]['history'][0]['mine']){
            ms[key]['history'][0]['avatar'] = ms[key]['history'][0]['to']['avatar'];
            ms[key]['history'][0]['name'] = ms[key]['history'][0]['to']['name'];
            ms[key]['history'][0]['realname'] = ms[key]['history'][0]['to']['realname'];
            ms[key]['history'][0]['id'] = ms[key]['history'][0]['to']['id'];
          }
        }
      }
      return ms;
    },
    transferMyData(msgList){
      if(me.friendId>0){
        var myChatLog = [];
        var nextTime = 0;
        myChatLog = util.deepCopy(msgList[me.userInfo.user_id][me.msgType+me.friendId]?(msgList[me.userInfo.user_id][me.msgType+me.friendId]['chatlog']||[]):[]);

        for(var i=0;i<myChatLog.length;i++){
          if(i>0){
            nextTime = myChatLog[i-1]['timestamp'];
          }
          if((myChatLog[i]['timestamp']-nextTime)>5*60*1000){
            myChatLog[i]['timestampStr'] = util.transferDate2(myChatLog[i]['timestamp']);
          }
          else{
            myChatLog[i]['timestampStr'] = "";
          }
          if(/img\[([^\s]+?)\]/.test(myChatLog[i]['content'])) {
            myChatLog[i]['msgType'] = 'img';
            myChatLog[i]['content'] = myChatLog[i]['content'].replace(/(^img\[)|(\]$)/g, '');
          }
          else if(/json\[.*\]/.test(myChatLog[i]['content'])) {
            myChatLog[i]['msgType'] = 'json';
            var str = myChatLog[i]['content'].replace(/(^json\[)|(\]$)/g, '');
            str = str.replace(/&amp;/g, '&');
            str = str.replace(/&lt;/g, '<');
            str = str.replace(/&gt;/g, '>');
            str = str.replace(/&quot;/g, '"');
            str = str.replace(/&#039;/g, "'");
            str = str.replace(/&#39;/g, "'");
            var obj = JSON.parse(str);
            myChatLog[i]['content'] = obj;
          }
          else{
            myChatLog[i]['msgType'] = 'text';
            myChatLog[i]['content'] = util.transferContent3(myChatLog[i]['content']);
          }

        }
        me.msgCount = myChatLog.length;
        return myChatLog;
      }
    },
    toChat(type,id,name,realname,avatar,unread){
      var to = {};
      to.id=id;
      to.name=name;
      to.realname = realname;
      to.avatar=avatar;
      to.unread = unread;
      to.type = type;
      me.friendId = id;
      me.msgType = type;
      // console.log(to);
      me['chatModule/setChatTo'](to);
      me['chatModule/setChatWindowsId'](id);
      // this.setRead();
      // me.myMsgList = this.transferMyData(this.historyMsgList);
      // this.$nextTick(function() {
      //   me.scrollDown();
      // });
    },
    setRead(){
      if(me.friendId>0){
        var num = 0;
        var historyMsgListCopy = util.deepCopy(this.historyMsgList);
        if(!historyMsgListCopy[me.userInfo.user_id]){
          return false;
        }
        if(!historyMsgListCopy[me.userInfo.user_id][me.msgType+me.friendId]){
          return false;
        }
        if(!historyMsgListCopy[me.userInfo.user_id][me.msgType+me.friendId]['chatlog']){
          return false;
        }
        var myChatLog = historyMsgListCopy[me.userInfo.user_id][me.msgType+me.friendId]['chatlog']||[];
        for(var i=0;i<myChatLog.length;i++){
          if(myChatLog[i]['read']==0){
            myChatLog[i]['read'] = 1;
            num++;
          }
        }
        me['chatModule/setUnreadMsgCount'](me.unreadMsgCount - num);
        if(this.isElectron){
          this.ipcRenderer.send('MAINWIN:badge',me.unreadMsgCount);
        }
        me['chatModule/setHistoryMsgList'](historyMsgListCopy);
        me.setStore('historyMsgList', historyMsgListCopy);
      }
    },
    scrollDown() {
      if(this.friendId){
        this.$refs['msgScrollBar'].wrap.scrollTop = this.$refs['msgScrollBar'].wrap.scrollHeight;
      }
    },
    toDetail(title,url,type,target){
      if(type=="jump"){
        if(target=="_self"){
          this.$router.push(url).catch(() => {});
          me['baseModule/setMainTab']('dashboard');
        }
        else if(target=="_blank"){
          if (this.isElectron){
            this.ipcRenderer.send('MAINWIN:openWin',JSON.stringify({title:title,url:url}));
          }
          else{
            window.open(url, '_blank');
          }
        }
      }
      else if(type=="dialog"){
        if (this.isElectron){
          this.ipcRenderer.send('MAINWIN:window-max');
          this['baseModule/setElectronWinIsMax'](true);
        }
        this.iframeUrl=url;
        this.dialogTitle=title;
        this.dialogVisible=true;
      }
    },
    faceAddToMessage(char){
      this.msgContent = this.msgContent + char;
      this.faceDialogVisible = false;
    },
    sendMsg(){
      var msg = {};
      msg.type = this.msgType;
      msg.content = this.msgContent;
      msg.id = me.userInfo.user_id;
      msg.avatar = me.userInfo.avatar;
      msg.name = me.userInfo.username;

      msg.from_id = me.userInfo.user_id;
      msg.from_avatar = me.userInfo.avatar;
      msg.from_name = me.userInfo.username;

      msg.realname = me.userInfo.realname;
      msg.timestamp = new Date().getTime();
      msg.mine = true;
      msg.to=me.chatTo;
      msg.send = 0;
      chat.saveMsg(me,msg,"send");
      me.doSend(msg,0);
      this.msgContent="";
      me.scrollDown();
    },
    doSend(msg,reSend){
      var sendData = {
        "mine":{
          "name":msg.name,
          "realname":msg.realname,
          "avatar":msg.avatar,
          "id":msg.id,
          "mine":true,
          "content":msg.content
        },
        "to":{
          "id": msg.to['id'],
          "name": msg.to['name'],
          "realname": msg.to['realname'],
          "avatar": msg.to['avatar'],
          "type": msg.to['type']
        }
      };
      chat.sendMsg(me,sendData,function(){
        console.log('发送成功')
        if(reSend){me.reSendStatus=-1;}
        chat.sendStatus(me,msg,true);
      },function(){
        console.log('发送失败')
        if(reSend){me.reSendStatus=-1;}
        chat.sendStatus(me,msg,false);
      });
    },
    sendPic(options){
      var objectURL = null;
      var file = options.file;
      var file_name_o = file.name.substr(0,file.name.lastIndexOf('.'));
      var file_name_n = file_name_o+"("+new Date().getTime() + Math.floor(Math.random() * 150)+")" + util.getSuffix(file.name);
      objectURL = URL.createObjectURL(file);
      var msg = {};
      msg.type = this.msgType;
      msg.content = "img["+objectURL+"]";
      msg.id = me.userInfo.user_id;
      msg.avatar = me.userInfo.avatar;
      msg.name = me.userInfo.username;

      msg.from_id = me.userInfo.user_id;
      msg.from_avatar = me.userInfo.avatar;
      msg.from_name = me.userInfo.username;

      msg.realname = me.userInfo.realname;
      msg.timestamp = new Date().getTime();
      msg.mine = true;
      msg.to=me.chatTo;
      msg.send = 0;
      chat.saveMsg(me,msg,"send");
      me.scrollDown();
      this.uploadToOss(msg,file,file_name_n,0);
    },
    reSend(e){
      if(me.reSendStatus!=-1){
        return false;
      }
      me.reSendStatus=e.currentTarget.dataset['key'];
      var msg = me.historyMsgList[me.userInfo.user_id][me.msgType+me.friendId]['chatlog'][me.reSendStatus];
      if(/img\[([^\s]+?)\]/.test(msg['content'])) {
        //PC重发暂时没解决
      }
      else{
        me.doSend(msg,1);
      }
    },
    beforeUpload(file) {
      const isLt20M = file.size / 1024 / 1024 < 20;
      if (!isLt20M) {
        this.$message.error('上传文件大小不能超过20MB!');
      }
      return isLt20M;
    },
    uploadToOss(msg,file,file_name,reSend){
      var msgCopy = util.deepCopy(msg);
      this.ossClient.put("im/"+file_name, file).then(res=>{
        if (res.res.statusCode === 200) {
          msgCopy.content = "img["+res.url+"]";
          chat.changePicUrl(me,msg,res.url);
          me.doSend(msgCopy,reSend);
        }else {
          chat.sendStatus(me,msg,false);
        }
      }).catch(err => {
        chat.sendStatus(me,msg,false);
      });

    }
  }
}
</script>

<style scoped>
.chat-main{
  display:flex;
}
.chat-msglst{
  width:256px;
  background:#fff;
  position: relative;
  /*box-shadow: 1px 3px 3px rgba(0, 0, 0, .08);*/
  height: calc(100vh - 46px);
}
.chat-msglst:after {
  content: ' ';
  position: absolute;
  left: auto;
  bottom: auto;
  right: 0;
  top: 0;
  height: 100%;
  background-color: #ccc;
  width: 1px;
  transform: scaleX(0.3);
  transform-origin: 70% 0;
  pointer-events: none;
}
.chat-dialogue{
  flex:1;
  display: flex;
  flex-direction: column;
}
.chat-msglst-item{
  padding: 10px;
  display: flex;
  align-items: center;
}
.chat-msglst-item.active{
  background:#E0E2E4;
}
.name-row{
  padding-left:10px;
  display: flex;
  justify-content: space-between;
  width:186px;
  height:22px;
  line-height:22px;
}
.msg-row{
  padding-left:10px;
  display: flex;
  justify-content: space-between;
  width:186px;
  height:22px;
  line-height:22px;
  justify-items:center;
  position: relative;
}
.chat-msglst-item{
  position: relative;
  cursor: pointer;
}
.chat-msglst-item:after{
  content: ' ';
  position: absolute;
  left: 0;
  bottom: 0;
  right: auto;
  top: auto;
  height: 1px;
  background-color: #e7e7e7;
  width: 100%;
  transform: scaleY(0.3);
  transform-origin: 0 70%;
  pointer-events: none;
}
.name-row .name{
  color:#4a4a4a;
}
.name-row .time{
  color:#aaaaaa;
  font-size: 12px;
}
.msg-row .msg{
  color:#8799a3;
  font-size: 12px;
  width:170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-row .badge{
  color:#ffffff;
  font-size: 11px;
  background:#ff4d4f;
  width:16px;
  height:16px;
  line-height:16px;
  margin-top: 2px;
  text-align: center;
  border-radius: 8px;
}


.msg-container .nickname{
  color:#8799a3;
  font-size: 12px;
  margin-left: 15px;
  margin-bottom: 5px;
}
.msg-lst{
  width: 100%;
  height: calc(100vh - 46px - 180px);
}
.msg-item{
  padding: 15px;
  display: flex;
}
.msg-item.self{
  justify-content: flex-end;
}
.msg-con{
  background: #ffffff;
  margin-left:15px;
  border-radius: 5px;
  position: relative;
  padding: 10px;
}
.msg-container{
  max-width: calc(100% - 120px);
}
.msg-item.self .msg-con{
  margin-left: 0;
  margin-right: 15px;
  background: #409EFF;
  color:#fff;
}
.msg-con::after {
  content: "";
  top: 13px;
  transform: rotate(45deg);
  position: absolute;
  z-index: 100;
  display: inline-block;
  overflow: hidden;
  width: 12px;
  height: 12px;
  left: -6px;
  right: initial;
  background-color: inherit;
}
.msg-item.self .msg-con::after {
  content: "";
  top: 13px;
  transform: rotate(45deg);
  position: absolute;
  z-index: 100;
  display: inline-block;
  overflow: hidden;
  width: 12px;
  height: 12px;
  right: -6px;
  left: initial;
  background-color: #409EFF;
}
.msg-text{
  line-height: 22px;
}
.msg-image{
  max-width: 300px;
}

.msg-item.self .msg-con.msg-image,
.msg-con.msg-image{
  padding:0;
  background:transparent;
  border-radius:5px;
  overflow: hidden;
  display: flex;
}
.msg-con.msg-image:after,
.msg-item.self .msg-con.msg-image:after
{
  display: none;
}
.msg-date{
  text-align: center;
  color:#aaaaaa;
  font-size: 12px;
  margin-top: 15px;
}
.msg-json{
  width: 300px;
}
.msg-item.self .msg-json-title{
  color:#fff;
}
.msg-json-title{
  color:#3d4145;
  font-weight: bold;
  position: relative;
  padding-bottom: 10px;
}
.msg-json-content{
  padding-top: 10px;
}
.msg-json-a{
  cursor: pointer;
  margin-top: 10px;
  padding-top: 10px;
  position: relative;
  font-size: 13px;
  color:#409EFF;
}
.msg-item.self .msg-json-a{
  color:#fff;
}
.msg-json-a:before{
  content: ' ';
  position: absolute;
  left: 0;
  bottom: auto;
  right: auto;
  top: 0;
  height: 1px;
  background-color: #e7e7e7;
  width: 100%;
  transform: scaleY(0.3);
  transform-origin: 0 70%;
  pointer-events: none;
}
.msg-json-a:after{
  position: absolute;
  background-image: url();
  top: 12px;
  right: 0;
  bottom: 0;
  display: block;
  width: 15px;
  height: 15px;
  color: #8799a3;
  content: "";
  text-align: center;
  font-size: 17px;
  line-height: 15px;
  background-size: cover;
}
.msg-json-title:after{
  content: ' ';
  position: absolute;
  left: 0;
  bottom: 0;
  right: auto;
  top: auto;
  height: 1px;
  background-color: #e7e7e7;
  width: 100%;
  transform: scaleY(0.3);
  transform-origin: 0 70%;
  pointer-events: none;
}
.foot{
  height: 180px;
  position: relative;
  width:100%;
  /*box-shadow: 0px -1px 3px rgba(0, 0, 0, .08);*/
}
.foot .tool-bar{
  padding-top:5px;
  position: relative;
  display: flex;
  align-items: center;
}
.foot .btn-bar{
  height: 40px;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding-right: 12px;
}
.foot .input-area{
  height: 105px;
}
/*.foot .tool-bar:after {*/
/*  content: ' ';*/
/*  position: absolute;*/
/*  left: 0;*/
/*  bottom: 0;*/
/*  right: auto;*/
/*  top: auto;*/
/*  height: 1px;*/
/*  background-color: #ccc;*/
/*  width: 100%;*/
/*  transform: scaleY(0.3);*/
/*  transform-origin: 0 70%;*/
/*  pointer-events: none;*/
/*}*/
.foot:before {
  content: ' ';
  position: absolute;
  left: 0;
  bottom: auto;
  right: auto;
  top: 0;
  height: 1px;
  background-color: #ccc;
  width: 100%;
  transform: scaleY(0.3);
  transform-origin: 0 70%;
  pointer-events: none;
}
.foot .tool-bar .btn{
  font-size:20px;
  color:#666;
  width:30px;
  height: 30px;
  padding: 0;
}
.foot .tool-bar{
  padding-left: 10px;
}
.foot .tool-bar .el-button + .el-button {
  margin-left: 5px;
}
/deep/.el-textarea__inner{
  border:none;
  border-radius: 0;
  height:100px;
  background: #F0F2F5;
  padding-top: 0;
}
.face-lst .btn:first-child{
  margin-left:10px;
}
</style>
